<template>
  <MyCard style="height: 100%" v-if="show" :title="exam.name" back :back-function="goBack">
    <p>本次考试截止至{{mysqlTimeToMyDate(exam.end_time)}}</p>
    <el-button type="primary" :disabled="!canExam" @click="showDialog=true">前往考试</el-button>
    <p v-if="!canExam" style="color: red">考试已经结束！</p>
  </MyCard>
  <el-dialog title="提示" v-model="showDialog" width="30em">
    <p>确定前往考试吗？中途退出考试，将不会自动交卷且计时继续，考试时间到后将视为未交卷！</p>
    <el-button @click="showDialog=false" type="info">暂不前往</el-button>
    <el-button @click="goExam" type="warning">我已知晓，前往考试</el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import MyCard from "../../../components/MyCard.vue";
import {onMounted, reactive, ref} from "vue";
import {Exam} from "../../../types/mytypes";
import {PageStore} from "../../../store/store";
import router from "../../../router/router";
import {mysqlTimeToMyDate} from "../../../tools/mysqlTool";
let show = ref(false)
let showDialog = ref(false)
let exam = ref<Exam>({} as Exam)
let canExam = ref(true)
onMounted(async ()=>{
  await initData();
  show.value = true;
})
const initData = async ()=>{
  exam.value = PageStore.getNowExam() as Exam;
  let date = new Date()
  let endDate = new Date(exam.value.end_time)
  canExam.value = date < endDate
}
const goBack = ()=>{
  router.back()
}
const goExam = ()=>{
  router.push({name:"examPage"})
}
</script>

<style scoped lang="scss">

</style>